<template>
  <el-container class="bg_img1">
    <el-main class="bg_size1">
      <h1 class="ZC">修改个人信息</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="用户名" prop="accountname" class="item">
              <el-input
                v-model="ruleForm.accountname"
                placeholder="请输入用户名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="用户真实姓名" prop="name" class="item">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入用户真实姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item
              label="性别"
              prop="sex"
              :formatter="formatterGender"
              class="item"
            >
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" :formatter="formatterGender"></el-radio>
                <el-radio label="女" :formatter="formatterGender"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="电话号码" prop="phone" class="item">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请填写电话号码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4" :offset="10" class="msg">
            <span class="msg">{{ msg }}</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2" :offset="8">
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                plain
                @click="register()"
                >保存修改信息</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios"
import qs from "querystring"
import store from "../store";

export default {
  name: "AddMessageVue",
  data() {
    return {
      ruleForm: {
        accountname: this.$store.state.accountInfo.accountname,
        name: this.$store.state.accountInfo.name,
        sex: this.$store.state.accountInfo.sex,
        phone: this.$store.state.accountInfo.phone,
      },
      rules: {
        accountname: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "您的姓名应该在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "长度为 11 个字符",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
      },
      msg: "",
    };
  },
  methods: {
    register() {
      let params={
        id : this.$store.state.accountInfo.id,
        accountname : this.ruleForm.accountname,
        name : this.ruleForm.name,
        sex : this.ruleForm.sex,
        phone : this.ruleForm.phone
      }
      // console.log(formdata);
      // console.log(qs.stringify(formdata));
      let that=this;
      axios
        .post("http://localhost:8080/library/update", qs.stringify(params), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          },
        })
        .then(function (response) {
          console.log(response.data.data);
          if (response.data.code == 1) {
            window.alert("修改成功");
            that.$router.push({
              path: "/UserIndex",
            });
          } else {
            window.alert("修改失败");
            // this.$router.push({ path: "/" });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  }
};
</script>

<style scoped>
.ZC {
  font-size: 30px;
  margin-left: 40%;
  color: rgb(150, 172, 192);
}
.msg {
  color: red;
  margin-bottom: 15px;
}
</style>